<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Detection Data Visualization</title>
    <script src="https://cdn.jsdelivr.net/npm/echarts@5.4.3/dist/echarts.min.js"></script>
    <style>
        body {
            font-family: Arial, sans-serif;
            margin: 0;
            padding: 20px;
            background-color: #f5f5f5;
        }
        .header {
            text-align: center;
            margin-bottom: 30px;
        }
        .chart-container {
            display: flex;
            justify-content: center;
        }
        .chart-box {
            background-color: white;
            border-radius: 8px;
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
            padding: 20px;
            width: 80%;
            min-height: 400px;
        }
        .chart-title {
            text-align: center;
            margin-bottom: 15px;
            color: #333;
            font-size: 18px;
            font-weight: bold;
        }
        .back-btn {
            display: inline-block;
            padding: 8px 16px;
            background-color: #4CAF50;
            color: white;
            text-decoration: none;
            border-radius: 4px;
            margin-bottom: 20px;
        }
        .back-btn:hover {
            background-color: #45a049;
        }
        #data-debug {
            margin-top: 20px;
            padding: 15px;
            background-color: #f0f0f0;
            border-radius: 5px;
            display: none;
        }
    </style>
</head>
<body>
<a href="/detections" class="back-btn">Back to List</a>
<div class="header">
    <h1>Detection Data Visualization</h1>
</div>

<button onclick="toggleDebug()" style="margin-bottom: 10px;">Toggle Debug Info</button>
<div id="data-debug">
    <h3>Raw Data:</h3>
    <pre id="raw-data"></pre>
    <h3>Count Data:</h3>
    <pre id="count-data"></pre>
</div>

<div class="chart-container">
    <!-- 只保留各图片检测数量统计图 -->
    <div class="chart-box">
        <div class="chart-title">Detection Count per Image</div>
        <div id="countChart" style="width: 100%; height: 500px;"></div>
    </div>
</div>

<script th:inline="javascript">
    /*<![CDATA[*/
    // 获取后端传递的数据
    const detections = /*[[${detections}]]*/ [];

    // 调试函数
    function toggleDebug() {
        const debugDiv = document.getElementById('data-debug');
        debugDiv.style.display = debugDiv.style.display === 'none' ? 'block' : 'none';

        if(debugDiv.style.display === 'block') {
            document.getElementById('raw-data').textContent = JSON.stringify(detections, null, 2);
            document.getElementById('count-data').textContent = JSON.stringify(prepareCountData(detections), null, 2);
        }
    }

    // 处理数据用于数量统计图
    function prepareCountData(detections) {
        if(!detections || detections.length === 0) return { names: [], counts: [] };

        const countMap = {};
        detections.forEach(detection => {
            const imageName = detection.imageName || 'Unknown';
            countMap[imageName] = (countMap[imageName] || 0) + 1;
        });

        // 按检测数量排序
        const sortedEntries = Object.entries(countMap).sort((a, b) => b[1] - a[1]);

        return {
            names: sortedEntries.map(entry => entry[0]),
            counts: sortedEntries.map(entry => entry[1])
        };
    }

    // 初始化图表
    document.addEventListener('DOMContentLoaded', function() {
        // 数量统计图
        const countChart = echarts.init(document.getElementById('countChart'));
        const countData = prepareCountData(detections);

        const countOption = {
            tooltip: {
                trigger: 'axis',
                axisPointer: {
                    type: 'shadow'
                },
                formatter: '{b}: {c} detections'
            },
            grid: {
                left: '3%',
                right: '4%',
                bottom: countData.names.length > 10 ? '25%' : '15%',
                containLabel: true
            },
            xAxis: {
                type: 'category',
                data: countData.names,
                axisLabel: {
                    rotate: countData.names.length > 5 ? 45 : 0,
                    interval: 0,
                    fontSize: 10,
                    formatter: function(value) {
                        return value.length > 20 ? value.substring(0, 20) + '...' : value;
                    }
                }
            },
            yAxis: {
                type: 'value',
                name: 'Detection Count'
            },
            series: [{
                name: 'Detections',
                type: 'bar',
                data: countData.counts,
                itemStyle: {
                    color: function(params) {
                        const colorList = ['#c23531','#2f4554','#61a0a8','#d48265','#91c7ae','#749f83','#ca8622'];
                        return colorList[params.dataIndex % colorList.length];
                    }
                },
                emphasis: {
                    itemStyle: {
                        shadowBlur: 10,
                        shadowOffsetX: 0,
                        shadowColor: 'rgba(0, 0, 0, 0.5)'
                    }
                },
                label: {
                    show: true,
                    position: 'top',
                    formatter: '{c}'
                }
            }],
            dataZoom: countData.names.length > 10 ? [{
                type: 'slider',
                show: true,
                xAxisIndex: [0],
                start: 0,
                end: 100
            }] : []
        };

        // 显示加载动画
        countChart.showLoading();

        // 设置图表选项
        setTimeout(() => {
            countChart.hideLoading();
            countChart.setOption(countOption);

            // 如果没有数据，显示提示
            if(countData.names.length === 0) {
                countChart.setOption({
                    graphic: {
                        type: 'text',
                        left: 'center',
                        top: 'middle',
                        style: {
                            text: 'No detection data available',
                            fontSize: 16,
                            fontWeight: 'bold',
                            fill: '#999'
                        }
                    }
                });
            }
        }, 500);

        // 窗口大小变化时重新调整图表大小
        window.addEventListener('resize', function() {
            countChart.resize();
        });
    });
    /*]]>*/
</script>
</body>
</html>